/**
 * 主题模式分段选择器组件
 *
 * 本文件定义了用于切换应用主题模式的分段选择器组件，支持light/dark/system三种模式切换
 * 依赖Ant Design的Segmented组件实现UI交互
 */

// 类型导入
import { useContext } from 'react';

import { ThemeMode } from 'ahooks/lib/useTheme';
import { Segmented } from 'antd';

import { ThemeContext, icons } from './themeContext';

import type { ThemeModeType } from 'ahooks/lib/useTheme';
import type { SegmentedOptions } from 'antd/es/segmented';

// 上下文和图标导入

/**
 * 分段选择器选项配置
 * @constant {SegmentedOptions}
 * @description 根据ThemeMode枚举生成分段选择器的选项配置
 * 每个选项包含对应的图标和值，图标来自themeContext中定义的icons映射
 */
const OPTIONS = Object.values(ThemeMode).map(item => {
	const key = item as ThemeModeType;
	return {
		label: (
			<div className="w-[70px] flex justify-center">
				<SvgIcon className="h-28px text-icon-small" icon={icons[key]} />
			</div>
		),
		value: item
	};
}) satisfies SegmentedOptions;

/**
 * 主题模式分段选择器组件
 *
 * @component
 * @returns {JSX.Element} 渲染一个分段选择器控件，用于切换应用主题模式
 *
 * @example
 * // 基本用法
 * <ThemeSchemaSegmented />
 *
 * @description
 * 该组件从ThemeContext中获取当前主题模式和设置方法，
 * 并通过Ant Design的Segmented组件提供UI交互
 */
const ThemeSchemaSegmented = () => {
	// 从主题上下文中获取主题设置方法和当前主题模式
	const { setThemeScheme, themeScheme } = useContext(ThemeContext);

	return (
		<Segmented
			className="bg-layout" // 应用布局背景色
			options={OPTIONS} // 使用预定义的分段选项
			value={themeScheme} // 绑定当前主题模式
			onChange={setThemeScheme} // 主题变更回调
		/>
	);
};

export default ThemeSchemaSegmented;
